<template>
	<view class="container">
		<!-- 顶部进度条区域 -->
		<view class="progress-section">
			<view class="progress-header">
				<text class="section-title">任务目标</text>
				<!-- <text class="progress-subtitle">成功预约</text> -->
			</view>

			<!-- 多色进度条 -->
			<view class="multi-progress-container">
				<template v-for="item in progressData">
					<progressvue :title="item.targetName" :targetValue="item.kmhTotle" :unit="item.unit" :progressList="item.progressList"></progressvue>
				</template>


			</view>
		</view>

		<!-- 营销成果区域 -->
		<view class="achievement-section">
			<view class="wdtopboxs">
				<view class="wdleftbox">
					<view class="lanboxs"></view>
					<view class="wdtxtbox">
						营销成果
					</view>
				</view>
			</view>
			<view class="section-header">
				<view class="search-box">
					<!-- 外部容器包裹图标和输入框 -->
					<view class="search-container">
						<u-icon name="search" size="18" color="#999" class="outer-search-icon"
							@click="handleSearch"></u-icon>
						<u-input v-model="searchKeyword" placeholder="搜索客户名" border="none" clearable class="outer-input"
							@input="handleSearch" @confirm="handleSearch"></u-input>
					</view>
				</view>
				<button class="add-button" @click="addAchievement">
					<u-icon name="plus" size="16" color="#b42322"></u-icon>
					<text>新增营销成果</text>
				</button>
			</view>
			<view class="sticky-box">
				<!-- 双重筛选区域 -->
				<view class="double-filter-section">
					<!-- 产品类型筛选 -->
					<scroll-view class="product-filter" scroll-x>
						<view class="filter-tags">
							<view class="filter-tag" v-for="product in productTypes" :key="product.value"
								:class="{ active: selectedProduct === product.value }"
								@click="selectProduct(product.value)">
								<text>{{ product.label }}</text>
							</view>
						</view>
					</scroll-view>

					<!-- 客户状态筛选 -->
					<scroll-view class="status-filter" scroll-x>
						<view class="filter-tags">
							<view class="filter-tag status-tag" v-for="(status,index) in statusTypes"
								:key="status.value" :class="status.select?'status-tag-active':''"
								@click="selectStatus(index)">
								<text>{{ status.label }}</text>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>

			<!-- 营销成果表格 -->
			<view class="table-container">
				<scroll-view class="table-scroll" scroll-x>
					<view class="table">
						<!-- 表头 -->
						<view class="table-header">
							<view class="header-cell ">客户名称</view>
							<view class="header-cell">行业</view>
							<view class="header-cell">客户状态</view>
							<view class="header-cell">客户详情</view>
							<view class="header-cell">营销进度</view>
						</view>

						<!-- 表格内容 -->
						<view class="table-row" v-for="(item, index) in achievements" :key="item.id"
							:class="{ even: index % 2 === 0 }">
							<view class="table-cell ">
								<text class="customer-name">{{ item.customerName }}</text>

							</view>
							<view class="table-cell">
								<text class="industry">{{ item.customerJob }}</text>
							</view>
							<view class="table-cell">
								<text class="industry">{{ customerStageList[item.customerStatus] }}</text>
								<!-- <u-tag :text="item.status" size="mini"  :bgColor="getStatusType(item.status)" :borderColor="getStatusType(item.status)"></u-tag> -->
							</view>
							<view class="table-cell">
								<text class="detail-link" @click="viewCustomerDetail(item)">查看</text>
							</view>
							<view class="table-cell">
								<text class="detail-link" @click="viewCustomerUpdate(item)">去更新</text>
							</view>

						</view>
					</view>
				</scroll-view>

				<!-- 空状态 -->
				<view class="empty-state" v-if="achievements.length === 0">
					<u-icon name="list" size="120" color="#ccc" class="empty-icon"></u-icon>
					<text class="empty-text">暂无相关数据</text>
				</view>

				<!-- 加载状态 -->
				<u-loadmore :status="loadStatus" :loading-text="loadText" margin-top="20rpx"
					margin-bottom="40rpx"></u-loadmore>
			</view>
		</view>

		<!-- 渠道详情弹窗 -->
		<u-popup :show="showChannelPopup" mode="center" round="20" @close="showChannelPopup = false">
			<view class="channel-popup" v-if="selectedChannel">
				<view class="popup-header">
					<text class="popup-title">{{ selectedChannel.label }}预约详情</text>
					<u-icon name="close" size="20" @click="showChannelPopup = false"></u-icon>
				</view>
				<view class="channel-detail">
					<view class="detail-item">
						<text class="detail-label">预约数量</text>
						<text class="detail-value">{{ selectedChannel.count }}人</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">占比</text>
						<text class="detail-value">{{ getChannelPercentage(selectedChannel) }}%</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">转化率</text>
						<text class="detail-value">{{ selectedChannel.conversionRate }}%</text>
					</view>
					<view class="progress-mini">
						<view class="progress-mini-bg">
							<view class="progress-mini-fill" :style="{ 
                  width: getChannelPercentage(selectedChannel) + '%',
                  backgroundColor: selectedChannel.color
                }"></view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import progressvue from './compontent/progress.vue';
	import {
		selectGoodStartCustomer,
		selectKmhProgressCount
	} from '@/common/api/renwu.js'
	export default {
		components: {
			progressvue
		},
		data() {
			return {
				task_id: null, //总任务
				step_id: '', //阶段
				// 进度条数据
				totalTarget: 100,
				appointmentChannels: [{
						type: 'phone',
						label: '电话',
						count: 25,
						icon: 'phone',
						color: '#b42322',
						conversionRate: 65
					},
					{
						type: 'sms',
						label: '短信',
						count: 88,
						icon: 'email',
						color: '#be841f',
						conversionRate: 45
					},
					{
						type: 'wechat',
						label: '微信',
						count: 220,
						icon: 'weixin-fill',
						color: '#fff019',
						conversionRate: 75
					},
					{
						type: 'other',
						label: '其他',
						count: 5,
						icon: 'more-dot-fill',
						color: '#ff6b6b',
						conversionRate: 30
					}
				],

				// 渠道详情弹窗
				showChannelPopup: false,
				selectedChannel: null,

				// 搜索和筛选
				searchKeyword: '',
				selectedProduct: '',
				selectedStatus: '',

				// 产品类型筛选
				productTypes: [{
						label: '全部',
						value: ''
					},
					{
						label: '存款',
						value: 1
					},
					{
						label: '贷款',
						value: 2
					},
					{
						label: '保险',
						value: 3
					},
					{
						label: '收单',
						value: 4
					},
					{
						label: '贵金额',
						value: 5
					}
				],

				// 客户状态筛选
				statusTypes: [{
						label: '全部',
						value: '',
						select: true,
					}, {
						label: '成交',
						value: 2,
						select: false,
					},
					{
						label: '预约成功',
						value: 0,
						select: false,
					},
					{
						label: '拒绝',
						value: 1,
						select: false,
					}
				],
				customerStageList: {
					0: '预约成功',
					1: '拒绝',
					2: '成交',
					3: '未预约'
				},

				// 营销成果数据
				achievements: [],
				// 分页参数
				pageNum: 1, // 当前页码
				pageSize: 10, // 每页条数
				total: 0, // 总条数
				// 状态控制
				isLoading: false, // 加载中锁
				isFirstLoading: true, // 首次加载状态
				loadStatus: 'loadmore', // 加载状态（loadmore/loading/noMore/error）
				loadText: '上拉加载更多',
				refreshing: false, // 下拉刷新中
				progressData: [] //统计
			}
		},

		computed: {
			// 总当前预约数
			totalCurrent() {
				return this.appointmentChannels.reduce((total, channel) => total + channel.count, 0)
			},


		},
		onLoad(options) {
			console.log(options,'======')
			this.task_id = options.task_id
			this.step_id = options.step_id
			this.initData();
		},
		onShow() {
			this.getDataCount()
		},
		methods: {
			// 获取渠道百分比
			getChannelPercentage(channel) {
				return (channel.count / this.totalTarget) * 100
			},

			// 获取进度条段落的圆角
			// getSegmentBorderRadius(index) {
			// 	if (index === 0) {
			// 		return '8rpx 0 0 8rpx'
			// 	} else if (index === this.appointmentChannels.length - 1) {
			// 		return '0 8rpx 8rpx 0'
			// 	} else {
			// 		return '0'
			// 	}
			// },

			// 显示渠道详情
			// showChannelDetail(channel) {
			// 	this.selectedChannel = channel
			// 	this.showChannelPopup = true
			// },

			// 获取状态数量统计
			// getStatusCount(statusValue) {
			// 	if (statusValue === 'all') return this.achievements.length
			// 	return this.achievements.filter(item => item.status === statusValue).length
			// },

			// 获取状态标签文字
			// getStatusLabel(statusValue) {
			// 	const status = this.statusTypes.find(item => item.value === statusValue)
			// 	return status ? status.label : ''
			// },

			// 选择产品类型
			// selectProduct(product) {
			// 	this.selectedProduct = product
			// },

			// 选择客户状态
			// selectStatus(index) {
			// 	let selectedStatus = this.statusTypes
			// 	selectedStatus.forEach((item, index2) => {
			// 		if (index2 == index) {

			// 			item.select = !item.select
			// 		} else {

			// 			item.select = false
			// 		}
			// 	})
			// 	console.log(selectedStatus, '----------')
			// 	this.statusTypes = selectedStatus
			// },

			// 清除所有筛选
			// clearAllFilters() {
			// 	this.selectedProduct = 'all'
			// 	this.selectedStatus = 'all'
			// 	this.searchKeyword = ''
			// },

			// 获取进度条颜色
			// getProgressColor(progress) {
			// 	if (progress >= 80) return '#19be6b'
			// 	if (progress >= 60) return '#b42322'
			// 	if (progress >= 30) return '#ff9900'
			// 	return '#ff4444'
			// },

			// // 获取产品类型标签样式
			// getProductType(type) {
			// 	const typeMap = {
			// 		'存款': 'primary',
			// 		'贷款': 'success',
			// 		'保险': 'warning',
			// 		'收单': 'info',
			// 		'贵金额': 'error'
			// 	}
			// 	return typeMap[type] || 'default'
			// },

			// 获取状态标签样式
			getStatusType(status) {
				const typeMap = {
					'成交': '#b42322',
					'意向客户': '#b42322',
					'拒绝': '#b42322 '
				}
				return typeMap[status] || 'default'
			},



			// 新增营销成果
			addAchievement() {
				uni.navigateTo({
					url: `/homeNav/wdrw/rw_export?task_id=${this.task_id}`,
					events: {
						// 注册一个名为 refreshData 的回调事件
						refreshData: () => {
							// 触发上一页的更新方法
							this.initData();
						}
					}
				})
			},


			// 查看客户详情
			viewCustomerDetail(item) {
				// type:0 查客户 1群
				uni.navigateTo({
					url: `/pages/management/manageDetail?data=${item.customerId}&type=0`
				})
			},
			// 更新
			viewCustomerUpdate(item) {
				uni.navigateTo({
					url: `/homeNav/wdrw/rw_list?task_id=${this.task_id}&step_id=${this.step_id}&customer_id=${item.customerId}`,
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', item)
					}
				})
			},
			// 列表数据
			// 初始化数据（重置分页）
			initData() {
				this.loadStatus = 'loading';
				this.loadText = '加载中...';
				this.isLoading = false;
				this.achievements = [];
				this.pageNum = 1
				this.fetchData();
			},

			// 接口请求数据
			async fetchData() {
				if (this.isLoading) return;
				this.isLoading = true;
				this.loadStatus = 'loading';
				this.loadText = '加载中...';
				try {
					let param = {
						id: this.task_id,
						pageNum: this.pageNum,
						pageSize: this.pageSize,
						userName: this.searchKeyword,
						customerLabel: this.selectedProduct, //产品类型
						customerStatus: this.selectedStatus //客户状态
					}
					let res = await selectGoodStartCustomer(param)
					this.isLoading = false;
					this.total = res.data.total;
					this.achievements = [...this.achievements, ...res.data.records];
					if (this.achievements.length >= this.total) {
						this.loadStatus = 'noMore';
						this.loadText = '已加载全部数据';
					} else {
						this.loadStatus = 'loadmore';
						this.loadText = '上拉加载更多';
						this.pageNum++; // 页码自增
					}

				} catch (error) {
					console.error('加载失败：', error);
					this.isLoading = false;
					this.loadStatus = 'error';
					this.loadText = '加载失败，点击重试';
				} finally {
					this.loading = false;
				}
			},

			// 筛选条件变化时重置分页
			selectProduct(product) {
				this.selectedProduct = product;
				this.initData(); // 重置并重新加载
			},

			selectStatus(index) {
				this.statusTypes.forEach((item, i) => {
					item.select = i === index;
				});
				this.selectedStatus = this.statusTypes[index].value;
				this.initData(); // 重置并重新加载
			},

			// 搜索时重置分页（添加节流）
			handleSearch() {
				if (this.searchTimer) clearTimeout(this.searchTimer);
				this.searchTimer = setTimeout(() => {
					this.initData();
				}, 300);
			},

			// 清除筛选条件
			clearAllFilters() {
				this.selectedProduct = '';
				this.selectedStatus = '';
				this.searchKeyword = '';
				this.initData();
			},
			// 统计
			async getDataCount() {
				try {
					const res = await selectKmhProgressCount({
						phaseTaskId: this.step_id
					})
					console.log(res, 'e')

					this.statisticsCount(res.data)

				} catch (error) {
					//TODO handle the exception
				}
			},
			statisticsCount(count) {
				try {
					let a = count

					// 字段映射关系：xxxCount 对应 name 和 color
					const countToNameMap = {
						callCount: {
							name: "电话",
							color: "#c88b28"
						},
						smsCount: {
							name: "短信",
							color: "#ff7d00"
						},
						wxCount: {
							name: "微信",
							color: "#ff4d00"
						},
						textCount: {
							name: "文字记录",
							color: "#c7003b"
						},
						visitCount: {
							name: "上门拜访",
							color: "#637aff"
						},
						qrcodeCount: {
							name: "二维码预约",
							color: "#ffff19"
						},
						ntCount: {
							name: "网点面谈",
							color: "#af52de"
						}
					};

					const mappedKeys = Object.keys(countToNameMap);

					// 遍历a数组，给每个对象新增unMappedCount字段存转换结果
					a = a.map(item => {
						// 筛选未映射的xxxCount字段
						const unMappedCountFields = Object.keys(item).filter(key => {
							return key.includes('Count') && mappedKeys.includes(key);
						});

						// 转换格式
						const unMappedCount = unMappedCountFields.map(key => {
							const {
								name,
								color
							} = countToNameMap[key];
							return {
								name,
								value: Number(item[key]) || 0,
								color
							};
						});
						// 保留原对象数据，新增字段存结果
						return {
							...item,
							progressList: unMappedCount
						};
					});

					console.log("保留原数据的a数组：", a);
					this.progressData = a
				} catch (error) {
					console.log("执行出错：", error); // 捕获并打印错误
				}
				console.log(b);
			}
		},
		// 页面触底时触发（系统自带函数）
		onReachBottom() {
			console.log('cccc')
			// 触底加载更多（排除首次加载、正在加载、无更多数据的情况）
			if (!this.isLoading && this.loadStatus === 'loadmore') {
				console.log('22')
				this.fetchData();
			}
		},

	}
</script>

<style scoped lang="scss">
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
		// padding: 20rpx;
	}

	/* 进度条区域 */
	.progress-section {
		// background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		background-image: url('/static/homeNav/wdrw_bg.png');
		background-size: 100% 100%;
		// border-radius: 20rpx;
		padding: 40rpx 30rpx;
		color: #fff;
		margin-bottom: 24rpx;
		box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.3);
		min-height: 400rpx;
	}

	.progress-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 28rpx;
		font-weight: 600;
		color: #a31010;
	}

	.progress-subtitle {
		font-size: 28rpx;
		opacity: 0.9;
	}

	/* 多色进度条样式 */
	.multi-progress-container {
		margin-bottom: 20rpx;
	}

	.progress-info {
		display: flex;
		align-items: baseline;
		margin-bottom: 20rpx;
	}

	.current-count {
		font-size: 48rpx;
		font-weight: bold;
		margin-right: 10rpx;
	}

	.total-count {
		font-size: 28rpx;
		opacity: 0.8;
	}

	.multi-progress-bar {
		height: 24rpx;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 12rpx;
		display: flex;
		overflow: hidden;
		margin-bottom: 30rpx;
		position: relative;
	}

	.progress-segment {
		height: 100%;
		position: relative;
		transition: all 0.3s ease;
		cursor: pointer;
	}

	.progress-segment:active {
		opacity: 0.8;
		transform: scaleY(1.1);
	}

	.segment-tooltip {
		position: absolute;
		top: -50rpx;
		left: 50%;
		transform: translateX(-50%);
		background: rgba(0, 0, 0, 0.8);
		color: white;
		padding: 8rpx 16rpx;
		border-radius: 8rpx;
		font-size: 20rpx;
		white-space: nowrap;
		z-index: 10;
	}

	.channel-labels {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20rpx;
	}

	.channel-label-item {
		display: flex;
		align-items: center;
		padding: 15rpx 20rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 12rpx;
		cursor: pointer;
		transition: all 0.3s;
	}

	.channel-label-item:active {
		background: rgba(255, 255, 255, 0.2);
		transform: scale(0.98);
	}

	.label-color {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		margin-right: 15rpx;
	}

	.label-text {
		font-size: 26rpx;
		margin-right: 10rpx;
		font-weight: 500;
	}

	.label-count {
		font-size: 24rpx;
		opacity: 0.9;
		margin-right: 5rpx;
	}

	.label-percent {
		font-size: 22rpx;
		opacity: 0.7;
	}

	/* 营销成果区域 */
	.achievement-section {
		width: 96%;
		margin: auto;
		background: #fff;
		border-radius: 20rpx;
		padding: 24rpx;
		box-sizing: border-box;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
	}

	.section-header {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
		gap: 20rpx;
	}

	.search-box {
		flex: 1;
		background: #f8f9fa;
		border-radius: 12rpx;
		padding: 8rpx 20rpx;
	}

	.add-button {
		border: 2rpx solid #b42322 !important;
		background-color: rgba(180, 35, 34, 0.1);
		color: #b42322;
		border: none;
		border-radius: 12rpx;
		padding: 0rpx 20rpx;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		gap: 10rpx;
		white-space: nowrap;
	}

	/* 双重筛选区域 */
	.double-filter-section {
		margin-bottom: 20rpx;
	}

	.product-filter,
	.status-filter {
		margin-bottom: 16rpx;
	}

	.filter-tags {
		display: flex;
		gap: 20rpx;
		padding: 10rpx 0;
	}

	.filter-tag {
		padding: 6rpx 24rpx;
		background: #f8f9fa;
		border-radius: 30rpx;
		font-size: 26rpx;
		color: #666;
		white-space: nowrap;
		transition: all 0.3s;
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.filter-tag.active {
		background: #b42322;
		color: #fff;
	}

	/* 状态筛选标签特殊样式 */
	.status-tag {
		border: 2rpx solid #ffffff !important;
	}

	.status-tag-active {
		// background: #19be6b;
		border: 2rpx solid #b42322 !important;
		background-color: rgba(180, 35, 34, 0.1);
		color: #b42322;
	}


	.status-count {
		background: rgba(255, 255, 255, 0.2);
		padding: 4rpx 12rpx;
		border-radius: 20rpx;
		font-size: 22rpx;
		min-width: 40rpx;
		text-align: center;
	}

	.filter-tag.active .status-count {
		background: rgba(255, 255, 255, 0.3);
	}

	/* 筛选结果统计 */
	.filter-result {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		margin-bottom: 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.result-text {
		font-size: 26rpx;
		color: #666;
	}

	.filter-tags-text {
		color: #b42322;
	}

	.clear-filter {
		font-size: 26rpx;
		color: #b42322;
		text-decoration: underline;
	}

	/* 表格样式 */
	.table-container {
		border: 1rpx solid #e8e8e8;
		border-radius: 12rpx;
		overflow: hidden;
		min-height: 400rpx;
	}

	.table-scroll {
		width: 100%;
	}

	.table {
		min-width: 750rpx;
	}

	.table-header {
		display: flex;
		background: #fff;
		border-bottom: 1rpx solid #e8e8e8;
	}

	.header-cell {
		flex: 1;
		padding: 16rpx;
		box-sizing: border-box;
		font-size: 26rpx;
		font-weight: 600;
		color: #333;
		text-align: center;
		min-width: 150rpx;
	}

	.first-column {
		flex: 1.2;
		text-align: left;
	}

	.table-row {
		display: flex;
		border-bottom: 1rpx solid #f0f0f0;
		transition: background-color 0.3s;
	}

	.table-row:last-child {
		border-bottom: none;
	}

	.table-row.even {
		background: #f7f2f2;
	}

	.table-row:hover {
		background: #f8f9fa;
	}

	.table-cell {
		flex: 1;
		padding: 18rpx;
		box-sizing: border-box;
		font-size: 26rpx;
		color: #666;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		min-width: 130rpx;
	}

	.customer-name {
		font-weight: 500;
		color: #333;
		margin-bottom: 10rpx;
	}

	.product-tag {
		margin-top: 5rpx;
	}

	.detail-link {
		color: #b42322;
		// text-decoration: underline;
	}

	.progress-container {
		display: flex;
		align-items: center;
		gap: 15rpx;
		width: 100%;
	}

	.progress-bg {
		flex: 1;
		height: 8rpx;
		background: #e8e8e8;
		border-radius: 4rpx;
		overflow: hidden;
	}

	.progress-text {
		font-size: 22rpx;
		color: #999;
		min-width: 60rpx;
	}

	.action-buttons {
		display: flex;
		flex-direction: column;
		gap: 10rpx;
		width: 100%;
	}

	.update-btn,
	.reject-btn {
		border: none;
		border-radius: 8rpx;
		padding: 12rpx 20rpx;
		font-size: 22rpx;
		white-space: nowrap;
	}

	.update-btn {
		background: #b42322;
		color: #fff;
	}

	.reject-btn {
		background: #ff4444;
		color: #fff;
	}

	.reject-btn.disabled {
		background: #ccc;
		color: #999;
	}

	/* 空状态 */
	.empty-state {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		padding: 80rpx 0;

		.empty-icon {
			margin-bottom: 30rpx;
		}

		.empty-text {
			font-size: 28rpx;
			color: #999;
			display: block;
			margin-bottom: 10rpx;
		}

		.empty-desc {
			font-size: 24rpx;
			color: #ccc;
			display: block;
			margin-bottom: 30rpx;
		}

		.empty-action {
			background: #b42322;
			color: #fff;
			border: none;
			border-radius: 12rpx;
			padding: 20rpx 40rpx;
			font-size: 26rpx;
		}
	}

	/* 渠道详情弹窗 */
	.channel-popup {
		padding: 40rpx;
		background: #fff;
		border-radius: 20rpx;
		width: 600rpx;
	}

	.channel-detail {
		margin-top: 30rpx;
	}

	.detail-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.detail-item:last-child {
		border-bottom: none;
	}

	.detail-label {
		font-size: 28rpx;
		color: #666;
	}

	.detail-value {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.progress-mini {
		margin-top: 20rpx;
	}

	.progress-mini-bg {
		height: 12rpx;
		background: #f0f0f0;
		border-radius: 6rpx;
		overflow: hidden;
	}

	.progress-mini-fill {
		height: 100%;
		border-radius: 6rpx;
		transition: width 0.3s ease;
	}

	/* 弹窗样式 */
	.popup-content {
		padding: 40rpx;
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.popup-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.form {
		.u-form-item {
			margin-bottom: 30rpx;
		}
	}

	.form-buttons {
		display: flex;
		gap: 20rpx;
		margin-top: 40rpx;
	}

	.cancel-btn,
	.confirm-btn {
		flex: 1;
		border: none;
		border-radius: 12rpx;
		padding: 24rpx;
		font-size: 28rpx;
	}

	.cancel-btn {
		background: #f8f9fa;
		color: #666;
	}

	.confirm-btn {
		background: #b42322;
		color: #fff;
	}

	.sticky-box {
		position: sticky;
		top: 0;
		left: 0;
		z-index: 9;
		background-color: #fff;
	}

	.wdtopboxs {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// background-color: #f6f6f6;

		.wdleftbox {
			width: 50%;
			display: flex;
			align-items: center;

			.lanboxs {
				width: 8rpx;
				height: 60rpx;
				background-color: #d43030;
			}

			.wdtxtbox {
				margin-left: 20rpx;
				color: #d43030;
			}
		}

		.timeboxs {
			margin-right: 30rpx;

			text {
				color: #a31010;
				font-weight: bold;
				font-size: 36rpx;
				padding: 0 10rpx;
			}
		}
	}

	.search-container {
		display: flex;
		align-items: center;
		background-color: #f5f5f5;
		/* 模拟输入框背景 */
		border-radius: 8rpx;
		/* 与输入框圆角一致 */
		// padding: 0 16rpx;
	}

	.outer-search-icon {
		margin-right: 10rpx;
		/* 图标与输入框的间距 */
	}

	.outer-input {
		flex: 1;
		/* 输入框占满剩余空间 */
		background-color: transparent !important;
		/* 去除输入框自身背景 */
	}
</style>

<style lang="scss">
	/* 全局样式调整 */
	.u-input {
		background: transparent !important;
	}

	.u-radio-group {
		display: flex;
		flex-wrap: wrap;
		gap: 30rpx;
	}

	.u-radio {
		margin-right: 0 !important;
	}
</style>